<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="css/public.css" type="text/css" rel="stylesheet"/>
  <script src="js/jquery-1.7.2.js"></script>
  <script src="js/mapConfig.js"></script>
  <script src="objClass/objQuery.js"></script>
  <script src="objClass/objFunction.js"></script>
  <script src="objClass/objGeoStyle.js"></script>
  <script src="objClass/objBubble.js"></script>
  <script src="objClass/objGeometry.js"></script>
  <script src="objClass/objInfowindow.js"></script>
  <script src="js/mapThemePopo.js"></script>
  <script src="js/mapPublicFunction.js"></script>
  <script src="js/mapShowLocation.js"></script>

  <style>
    .esriPopup .titleButton.maximize {
      display: none;
    }
    /****************楼层插件*************************/
    #btnFloor {
      height: 320px;
      width: 32px;
      margin-top: 1px;
      position: absolute;
      top: 200px;
      left: 65px;
      z-index: 101;
      display: none;
    }

    #img_bag{
      width: 32px;
      background: #F2F2F2;
      margin: 0 auto;
      text-align: center;
      padding: 2px 0;
      z-index: 101;
    }
    #img_bag > a {
      margin-left: 1px;
    }
    #floorDIV{
      width: 24px;
      background: #F2F2F2;
      overflow: hidden;
      margin: 0 auto;
      max-height: 150px;
    }
    #floorDIV ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #floorDIV li {
      padding: 0;
      width: 24px;
      height: 24px;
      overflow: hidden;
      margin: 5px 0;
      display: block;
    }

    #floorDIV li a{
      display: block;
      background: #fff;
      font-size: 12px;
      color: #000;
      line-height: 25px;
      text-align: center;
      text-decoration: none;
    }
    #floorDIV li a:hover {
      background: #99addf;
      color: #ff6600;
    }
    #floorDIV li a.activeFloor{
      background: rgb(153, 173, 223);
      color: rgb(255, 102, 0);
    }
    /****************楼层插件END*************************/

    .contentPane > div {
      overflow: auto;
    }
    #imgDiv,#content {
      float: left;
    }
    .imgStyle{
      width:210px;
      height:140px;
      margin-right:15px;
    }

    .tablestyle{
      width: 270px;
    }
    .tablestyle tr {
      height: 28px;
      line-height: 28px;
    }
    .esriPopup .actionsPane .zoomTo {
      display: none;
    }
    .esriPopup .titleButton.maximize {
      display: none;
    }
    .esriPopup .titleButton.close {
      top: 16px !important;
      right: 16px !important;
      height: 12px !important;
      width: 12px !important;
      background: url(img/ico_close.gif) no-repeat scroll center center transparent;
      background-position: center !important;
    }
    .esriPopup .pointer,
    .esriPopup .pointer.top,
    .esriPopup .outerPointer {
      background-color: #fff;
    }
    .esriPopup .titlePane {
      background-color: #fff !important;
      padding: 6px 6px 2px 6px;
    }

    .esriPopup .titlePane .title {
      background: #f1f1f1;
      padding-left: 8px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      color:#333;
    }
    .esriPopup .titlePane .title a{
      text-decoration: none;
    }
  </style>
</head>
<body style="height:100%; width:100%" onload="initPage()" class="tundra">

<div id="map" style="position:absolute; left:0; top:0; width:100%; height:100%;">
</div>
<div style="position: absolute;">
  <input id="position" type="button" name="position" value="点击获取坐标点" onclick="activateDraw('point')"/>
</div>

<div class="mapbtnbox">
<!--
<input id="location" type="button" name="location" value="定位" onclick="position(event)"/>
-->
  <div id="mapbtntext">
    影像图
  </div>
</div>
<script type="text/javascript">
  var map;
  var baseLayer;
  var imgLayer;//影像底图
  var showType;//记录当前显示类型（影像底图、矢量底图）

  var graphicLayer;  //室内结构
  var highlightLayer;   //室内单元
  var clickLayer;
  var tb_Draw;
  var objData="";


  //加载ArcgisAPI样式
  objFunction.loadCss(config.urlAPI + "/dijit/themes/claro/claro.css");
  objFunction.loadCss(config.urlAPI + "/esri/css/esri.css");
  //加载ArcgisAPI脚本
  objFunction.loadJs(config.urlAPI + "/init.js");

  function initPage() {require(["esri/map","esri/geometry/Extent","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer",
      "esri/layers/GraphicsLayer","esri/toolbars/draw",
      "dojo/parser","dojo/dom","dojo/on",
      "dojo/domReady!"],
    function (Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, FeatureLayer,
              GraphicsLayer,Draw,
              parser, dom, on) {
      //初始化地图div
      initMap();
      showType = configShowLayerType.Vector;
      baseLayer = new esri.layers.ArcGISTiledMapServiceLayer(config.urlBaseLayer);
      //添加矢量图到map
      map.addLayer(baseLayer);

      imgLayer = new esri.layers.ArcGISTiledMapServiceLayer(config.urlImgLayer);
      map.addLayer(imgLayer);
      imgLayer.hide();

      //初始化基类
      initObj();
      //向地图添加临时层
      addTempLayer();
      //定位到指定范围
      setExtent();
      // 绑定地图事件
      BindEvent();
      tb_Draw = new Draw(map);
    });
  }
  function initObj() {
    objQuery.init(config.wkid, map);
    objGeometry.init(config.wkid);
    objInfowindow.init(map);
  }

  //初始化地图div
  function initMap() {

    map = new esri.Map(
      'map'
      , {
        logo: false,
        slider: true,
        minZoom: config.minZoom,
        sliderStyle: "large"
      });
  }

  function setExtent(e) {
    //定位到指定范围
    var extent = new esri.geometry.Extent({
      "xmin": config.xmin, "ymin": config.ymin, "xmax": config.xmax,
      "ymax": config.ymax, "spatialReference": {
        "wkid": config.wkid
      }
    });
    if (e == "北京市") { //北京
      extent = new esri.geometry.Extent({
        "xmin": config.xmin_BJ, "ymin": config.ymin_BJ, "xmax": config.xmax_BJ,
        "ymax": config.ymax_BJ, "spatialReference": {
          "wkid": config.wkid
        }
      });
    }
    else if (e == "丹东市") { // 丹东
      extent = new esri.geometry.Extent({
        "xmin": config.xmin_DD, "ymin": config.ymin_DD, "xmax": config.xmax_DD,
        "ymax": config.ymax_DD, "spatialReference": {
          "wkid": config.wkid
        }
      });
    }
    else if (e == "珠海市") { //珠海
      extent = new esri.geometry.Extent({
        "xmin": config.xmin_ZH, "ymin": config.ymin_ZH, "xmax": config.xmax_ZH,
        "ymax": config.ymax_ZH, "spatialReference": {
          "wkid": config.wkid
        }
      });
    }
    else if (e == "大连市") { // 大连
      extent = new esri.geometry.Extent({
        "xmin": config.xmin_DL, "ymin": config.ymin_DL, "xmax": config.xmax_DL,
        "ymax": config.ymax_DL, "spatialReference": {
          "wkid": config.wkid
        }
      });
    }
    else if (e == "成都市") { // 成都
      extent = new esri.geometry.Extent({
        "xmin": config.xmin_CD, "ymin": config.ymin_CD, "xmax": config.xmax_CD,
        "ymax": config.ymax_CD, "spatialReference": {
          "wkid": config.wkid
        }
      });
    }
    //map.setExtent(extent);
    map.centerAndZoom(extent.getCenter(), config.initZoom);
  }

  //矢量影像切换方法
  function reloadMap(type) {
    if (type == showType) return;

    if (showType == configShowLayerType.Img) {
      //basemap.show();
      showType = configShowLayerType.Vector;
    }
    else if (showType == configShowLayerType.Vector) {
      //imgLayer.show();
      showType = configShowLayerType.Img;
    }
    else {
      return;
    }

    if (showType == configShowLayerType.Img) {
      imgLayer.show();
      baseLayer.hide();
    }
    if (showType == configShowLayerType.Vector) {
      baseLayer.show();
      imgLayer.hide();
    }
  }


  //添加临时层
  function addTempLayer() {
    graphicLayer = new esri.layers.GraphicsLayer();
    map.addLayer(graphicLayer);
    highlightLayer = new esri.layers.GraphicsLayer();
    map.addLayer(highlightLayer);
    clickLayer = new esri.layers.GraphicsLayer();
    map.addLayer(clickLayer);

  }
  //地图事件绑定
  function BindEvent() {
    dojo.connect(map, "onUpdateEnd", function (e, l, le, lod) {
      //ExtentChanged();
    });

    dojo.connect(map, "onLoad", function () {
      if(objData.length > 0){
        queryLDPosition(objData);
      }
    });
  }

  function queryLDPosition(buildId){
      QueryBySQL(config.urlIndoor+config.urlIndoor_build," BUILD_ID = '"+buildId+"'",(function(res){
        for (var i = 0; i < res.features.length; i++) {
          var graphic = res.features[i];
          var symbol = getPolygonStyle();
          graphic.attributes.layerID = "LDR";

          var graf = new esri.Graphic(graphic.geometry, symbol, graphic.attributes);
          highlightLayer.add(graf);
          var geo = graphic.geometry.getExtent().getCenter();
          //添加楼栋标签
          var label = res.features[i].attributes.BUILD_NAME;
          if(label){
            var src = "img/point_2.png";
            addPopo(graphicLayer, geo.x, geo.y, src, 20, 20, graphic.attributes, label, "9pt", 10, 5, 0);
          }
          map.centerAndZoom(geo,18);
        }
      }),(function(){console.log("查询楼栋失败...");}));
  }

  function activateDraw(type){
    var handler = function(evt){
      clickLayer.clear();
      var graphic;
      if(evt.geometry.type == 'point'){
        var mapIconPath="img/map.png";
        var pictureMarkerSymbol = new esri.symbol.PictureMarkerSymbol({"url": mapIconPath,"type": "esriPMS"});
        pictureMarkerSymbol.setWidth(20);//pictureMarkerSymbol.setOffset(0,13);
        pictureMarkerSymbol.setHeight(25);
        graphic = new esri.Graphic(evt.geometry, pictureMarkerSymbol);
        graphic.isHand = true;
      }
      clickLayer.add(graphic);

      var str = "x="+evt.geometry.x+",y="+evt.geometry.y;
      sendMessage({"position":str});
      //通过图形查询小区，以及楼栋
      tb_Draw.deactivate();
      dojo.disconnect(onDrawEnd);
    }
    var onDrawEnd = tb_Draw.on("draw-end", handler);

    if(type == 'point'){
      tb_Draw.activate(esri.toolbars.Draw.POINT);
    }else if(type == 'polygon'){
      tb_Draw.activate(esri.toolbars.Draw.POLYGON);
    }
  }
</script>
<script type="text/javascript">
  function position(e){
    var pt = new esri.geometry.Point(12946238.691,4862056.333,map.spatialReference);
    //var pt = new esri.geometry.Point(12940634.765732,4906039.923011,map.spatialReference);
    //var pt = new esri.geometry.Point(12937143.18285,4869269.787450001,map.spatialReference);
    map.centerAndZoom(pt,18);
    queryLDPosition("999002");
    e.stopPropagation();
  }

  function bindEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
      element.addEventListener(eventName, eventHandler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + eventName, eventHandler);
    }
  }

  bindEvent(window, 'message', function (e) {
    /*var obj = JSON.parse(e.data);
     objData = JSON.parse(e.data);*/
    console.log("接收参数：", e);
    if(e.data && e.data.length > 0){
      objData = e.data;
    }else{
      alert("缺少楼栋ID信息，无法定位");
    }
  });

  //向父级发送消息
  var sendMessage = function (msg) {
    window.parent.postMessage(msg, '*');
  };

</script>
</body>
</html>



